<template>
    <div class="revenueTrend">
        <div class="topArea">
            <div class="top">
                <ul>
                    <li
                        v-for="(item, index) in mainOperationIncome"
                        :key="index"
                        @click="getRevenData(index, 'top')"
                        :class="{ active: cateIndex == index }"
                    >
                        <div class="td-info">
                            <div class="td-l">
                                <p class="p1">{{ item.indexName }}</p>
                                <p class="p2">
                                    {{ item.thisMonthValue | thousands }}
                                </p>
                            </div>
                            <div class="td-r" :class="'titlebg' + index"></div>
                        </div>
                        <div class="bd">
                            <div class="bd-info">
                                <p class="p1">完成率</p>
                                <p class="p2">{{ item.completeRate }}</p>
                            </div>
                            <div class="bd-info">
                                <p class="p1">同比增长率</p>
                                <p class="p2">
                                    {{ item.tbYearIncrease
                                    }}<i
                                        :class="{
                                            up:
                                                +item.tbYearIncrease.replace(
                                                    '%',
                                                    ''
                                                ) > 0,
                                            down:
                                                item.tbYearIncrease.replace(
                                                    '%',
                                                    ''
                                                ) < 0
                                        }"
                                    ></i>
                                </p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!--企业GIS地图 -->

        <div class="g-wrapper">
            <div class="g-maps">
                <div
                    style="height: 700px; border-radius: 8px"
                    id="mapView"
                ></div>
                <div class="lineTip">
                    <div class="td">
                        <div class="line1"></div>
                        <p>差</p>
                    </div>
                    <div class="td">
                        <div class="line2"></div>
                        <p>中</p>
                    </div>
                    <div class="td">
                        <div class="line3"></div>
                        <p>好</p>
                    </div>
                </div>

                <div class="lineTip2" v-if="subLayer">
                    <div class="td">
                        <div class="line1"></div>
                        <p>差</p>
                    </div>
                    <div class="td">
                        <div class="line2"></div>
                        <p>中</p>
                    </div>
                    <div class="td">
                        <div class="line3"></div>
                        <p>好</p>
                    </div>
                </div>

                <div class="typeArea">
                    <span
                        :key="index"
                        v-for="(it, index) in typeArea"
                        :class="{ act: mapType == index }"
                        @click="handleMapType(it)"
                    >
                        {{ it.name }}
                    </span>
                </div>
                <div class="areaTree">
                    <div class="tree">
                        <span @click="handleArea('pro')" class="it">{{
                            province
                        }}</span
                        ><span v-if="city" class="right">></span>
                        <span
                            @click="handleArea('city')"
                            v-if="city"
                            class="it"
                            >{{ city }}</span
                        >

                        <span v-if="street" class="it street"
                            ><span class="right">></span>{{ street }}</span
                        >
                    </div>
                </div>
                <div v-if="mapLoading" class="mapLoading">
                    正在玩命加载中...
                </div>
            </div>
            <div class="g-charts">
                <div>
                    <accIncome
                        :title="incomeName"
                        :accumIncomeData="accumIncomeData"
                    ></accIncome>
                </div>
                <div style="margin-top: -5px">
                    <incomBarNew :incomeData="incomeData"></incomBarNew>
                </div>
                <div v-if="highFlag">
                    <div class="title">
                        {{ picName }}
                    </div>
                    <threepie
                        :id="id"
                        :option="option"
                        class="pieThere"
                    ></threepie>
                </div>
            </div>
        </div>
        <!-- <script src="http://134.96.249.161:9990/gisapi/getscript"></script> -->

        <!-- <div class="bottomArea" v-if="highFlag">
      <div
        class="leftArea"
        :class="{
          active: structDataList == undefined || structDataList.length < 0,
        }"
      >
         <div class="title">{{reportFNetName}}</div> 
      </div>
      <div
        class="rightArea"
        :class="{
          active: structDataList == undefined || structDataList.length < 0,
        }"
      >
         <threepie :id="id" :option="option" class="pieThere"></threepie> 
      </div>
    </div> -->
    </div>
</template>

<script>
import incomBarNew from "../echarts/incomBarNew";
import accIncome from "../echarts/accIncome";
import { $budgetAPI } from "@/api";
import { getCookie } from "@/common/js/cookie";
import threepie from "../echarts/threepie";
import $ from "jquery";
import { relativeTimeThreshold } from "moment";
import { getSessionStorage } from "../../../common/js/storage";
export default {
    name: "revenueTrend",
    components: {
        // tab1,
        // tab2,
        incomBarNew,
        accIncome,
        threepie
    },
    data() {
        return {
            form: {
                areaId: ""
            },
            picName: "",
            incomeName: "",
            mainBusinessIncome: {},
            mainOperationIncome: [],
            mainDev: [],
            acctMonth: "",
            mainIncomeTitle: "",
            basicTitle: "",
            dictTitle: "",
            numberIncomeTitle: "",
            accumIncomeData: {},
            incomeData: {},
            pieData: [],
            businessVolume: [],
            cateIndex: 0,
            id: "test",
            structDataList: [],
            highFlag: false,
            leftWidth: true,
            option: {
                chart: {
                    type: "pie", //饼图
                    options3d: {
                        enabled: true, //使用3d功能
                        alpha: 60, //延y轴向内的倾斜角度
                        beta: 0
                    }
                },
                title: {
                    text: "" //图表的标题文字
                },
                tooltip: {
                    pointFormat: "{point.y}万元"
                },
                credits: {
                    enabled: false
                }, //去掉地址
                plotOptions: {
                    pie: {
                        allowPointSelect: true, //每个扇块能否选中
                        cursor: "pointer", //鼠标指针
                        depth: 15, //饼图的厚度
                        size: "100%"
                    }
                },
                series: [
                    {
                        type: "pie",
                        size: "80%",
                        name: "",
                        data: [],
                        // data:this.pieData,
                        dataLabels: {
                            enabled: true, //是否显示饼图的线形tip
                            format: "{point.name}<br>{point.y}万元",
                            distance: 25,
                            padding: 0,
                            color: "#3d434d"
                        }
                    },
                    {
                        type: "pie",
                        size: "80%",
                        name: "",
                        data: [],
                        dataLabels: {
                            enabled: true, //是否显示饼图的线形tip
                            format: "{point.percentage:.0f}%",
                            distance: -30,
                            padding: 0,
                            style: {
                                color: "#fff",
                                textOutline: "none"
                            }
                        }
                    }
                ]
            },
            apiAk: "",
            _map: "",
            typeArea: [
                { name: "本地网", type: 0 },
                { name: "县分", type: 1 }
            ],
            mapType: 0,
            areaColor: [],
            indexCode: "",
            areaLvl: 2,
            province: "浙江",
            city: "",
            street: "",
            mapLoading: false,
            jsonLayer: "",
            jsonSubLayer: "",
            subLayer: "",
            cityId: '',
        };
    },
    filters: {
        thousands(num) {
            if (!num) return "";
            var reg = /\d{1,3}(?=(\d{3})+$)/g;
            return (num + "").replace(reg, "$&,");
        }
    },
    created() {

        // window.open('www.baidu.com', "_blank");
        // window.location.href = 'www.baidu.com';
        // const s = document.createElement("script");
        // s.type = "text/javascript";
        // s.src = "http://134.96.249.161:9990/gisapi/getscript";
        // document.body.appendChild(s);
        // debugger
        // console.log(111, Ai);
    },
    async mounted() {
        var that = this;

        this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        this.form.areaId = this.accountInfo.areaId;

        that.apiAk = await this.getMapApi();
        that._map = new Ai.Map("mapView", {
            ak: that.apiAk,
            mapType: "gwc",
            crs: Ai.EPSG3857,
            maxZoom: 9,
            scrollWheelZoom: true
        });
        var maplayer = Ai.TileLayer("http://134.96.249.161:9990/tdtvector");
        that._map.addLayer(
            Ai.TileLayer(
                "http://134.96.249.161:9990/telecomgis/zhejiang_map/server/wmts"
            )
        );
        that._map.addLayer(maplayer);
        that._map.setView([30.270599, 120.166568], 8); //地图定位

        that.init();
    },
    methods: {
        init() {
            var that = this;
            // this.getMainOperationIncomeData();
            // this.getIncomeProductStructData()
            this.getRevenData(0);
        },
        //获取主营数据接口
        getMainOperationIncomeData(index) {
            let token = getCookie("token");
            let that = this;
            return new Promise(resolve => {
                $budgetAPI.getMainOperationIncomeData(
                    { token: token, areaId: that.form.areaId },
                    res => {
                        if (res.code == 0) {
                            this.mainOperationIncome =
                                res.content.mainBusinessIncome;
                            res.content.mainBusinessIncome.map(
                                (item, index) => {
                                    item.completeRate = item.completeRate + "%";
                                    item.tbYearIncrease =
                                        item.tbYearIncrease + "%";
                                }
                            );
                            this.initPam =
                                res.content.mainBusinessIncome[index].indexCode;
                        } else {
                            console.log(res);
                            // this.alertError(res);
                        }
                        resolve(this.initPam);
                    },
                    err => {}
                );
            });
        },
        getRevenData(index, type) {
            var that = this;

            if (type) {
                that._map.removeLayer(that.jsonLayer);
                that._map.removeLayer(that.jsonSubLayer);
                // that.form.areaId = "1";
                // that.province = "浙江";
                // that.city = "";

                // var obj = {
                //   areaId: that.form.areaId,
                //   areaName: "浙江",
                // };
                // that.$bus.$emit("message", obj);
            }

            this.cateIndex = index;
            this.highFlag = false;

            // this.leftWidth = false;
            this.getMainOperationIncomeData(index).then(res => {
                let indexCode = res;
                let token = getCookie("token");
                that.indexCode = indexCode;

                $budgetAPI.getMainIncomeReportData(
                    { token: token, indexCode: indexCode },
                    res => {
                        if (res.code == 0) {
                            this.picName = res.content.picName;
                            this.incomeName = res.content.incomeName;
                            let obj = {
                                xAxis: [],
                                yAxis: [],
                                y1Axis: []
                            };
                            obj.xAxis = res.content.acctMonths;
                            obj.yAxis = res.content.tbIncreaseList;
                            let obj1 = {
                                xAxis: [],
                                yAxis: []
                            };
                            obj1.xAxis = res.content.acctMonths;
                            obj1.yAxis = res.content.mainIncomeList;
                            this.accumIncomeData = obj;
                            this.incomeData = obj1;
                            console.log(this.incomeData);
                            // 3d饼图
                            this.pieData = [];
                            this.structDataList = res.content.structDataList;
                            if (
                                res.content.structDataList &&
                                res.content.structDataList.length
                            ) {
                                res.content.structDataList.map(
                                    (item, index) => {
                                        let colorList = ["#43b1fd", "#f08181"];
                                        let obj = {};
                                        obj["name"] = item.indexName;
                                        obj["y"] = Number(item.indexValue);
                                        obj["color"] = colorList[index];
                                        that.pieData.push(obj);
                                    }
                                );
                                that.option.series[0].data = that.pieData;
                                that.option.series[1].data = that.pieData;
                                that.highFlag = true;
                            } else {
                                that.$nextTick(() => {
                                    that.highFlag = false;
                                });
                            }
                        }
                    },
                    err => {
                        console.log("err", err);
                    }
                );

                that.getMapIncome(indexCode);
            });
        },
        getMapApi() {
            var that = this;
            return new Promise(resolve => {
                $budgetAPI.getMapApi(
                    {},
                    res => {
                        if (res && res.code == 1) {
                            // that.apiAk = res.content;
                            resolve(res.content);
                        } else {
                            resolve(res.content);
                        }
                    },
                    err => {
                        console.log(err);
                    }
                );
            });
        },
        getLayerInfo() {
            var that = this;
            //杭州 2
            var id = that.form.areaId;

            that.mapLoading = true;
            $.ajax({
                type: "GET",
                async: false,
                url: "http://134.96.249.161:9990/gisserver/cite/wfs",
                data: {
                    ak: that.apiAk,
                    service: "WFS",
                    request: "GetFeature",
                    typeName: "cite:GEO_S_AREA",
                    outputformat: "json",
                    cql_filter:
                        that.mapType == 0 ? "PARENT_ID=" + id : "LEVEL_ID=3" //参数过滤,同filter，但是对于大数字不行  LEVEL_ID=3
                },
                success: function(result) {
                    if (result != null) {
                        that.jsonLayer = Ai.GeoJSON(result, {
                            style: function(feature) {
                                return {
                                    color: "#fff",
                                    weight: 1,
                                    fillColor: that.getLayerColor(feature),
                                    fillOpacity: 0.7
                                };
                            }
                        })
                            .bindTooltip(function(layer) {
                                return layer.feature.properties.NAME;
                            })
                            .on("click", function(layer) {
                                if (that.mapType) {
                                    return;
                                }
                                that.mapLoading = true;
                                that._map.removeLayer(that.jsonLayer);
                                var l_layer = layer.layer.feature.properties;
                                var id = l_layer.ID;
                                var city = l_layer.CITY;
                                var name = l_layer.NAME;

                                var areaLevel = l_layer.LEVEL_ID;
                                if (areaLevel > 3) {
                                    return
                                }
                                if (areaLevel > 1) {
                                    that.subLayer = true;
                                } else {
                                    that.subLayer = false;
                                }
                                if (areaLevel == 2) {
                                    that.cityId = id;
                                }
                                if (areaLevel == 3) {
                                    that.street = name;
                                } else {
                                    that.street = "";
                                }
                                console.log("areaLevel", areaLevel);
                                that.city = city;
                                that.form.areaId = id;
                                that.getMapIncome(that.indexCode);
                                // that.getSubLayerInfo(id);
                                that.getMainOperationIncomeData();
                                // pointLayer.clearLayers();
                                var obj = {
                                    areaId: that.form.areaId,
                                    areaName: areaLevel == 3 ? name : that.city,
                                    lvl: areaLevel
                                };
                                that.$bus.$emit("message", obj);
                            });
                        that._map.addLayer(that.jsonLayer);

                        that._map.fitBounds(that.jsonLayer.getBounds());
                        that.mapLoading = false;
                    }
                }
            });
        },
        getLayerColor(feature) {
            var that = this,
                color = "#4f99db",
                colorList = that.areaColor;
            var id = feature.properties.ID;

            for (let i = 0; i < colorList.length; i++) {
                let cur = colorList[i];
                if (cur.areaId == id) {
                    color = cur.color;
                    break;
                }
            }
            return color;
        },
        getSubLayerColor(feature) {
            var id = feature.properties.ID;
            // 差 #f08181, 中 #4f99db  好 #5cccaa
            if (id == 613) {
                return "#5cccaa";
            } else if (id == 447) {
                return "#5cccaa";
            } else if (id == 111) {
                return "#5cccaa";
            } else if (id == 449) {
                return "#f08181";
            } else if (id == 450) {
                return "#f08181";
            } else if (id == 647) {
                return "#f08181";
            } else {
                return "#4f99db";
            }
        },
        getSubLayerInfo(parent_id) {
            var that = this;

            $.ajax({
                type: "GET",
                async: false,
                url: "http://134.96.249.161:9990/gisserver/cite/wfs",
                data: {
                    ak: that.apiAk,
                    service: "WFS",
                    request: "GetFeature", //  GetFeature     GEO_S_AREA
                    typeName: "cite:GEO_S_AREA",
                    outputformat: "json",
                    cql_filter: "PARENT_ID=" + parent_id
                },
                success: function(result) {
                    if (result != null) {
                        // var point;
                        that.mapLoading = false;

                        that.jsonSubLayer = Ai.GeoJSON(result, {
                            style: function(feature) {
                                // console.log(feature.properties.NAME, feature.properties.ID);
                                return {
                                    color: "#fff",
                                    weight: 1,
                                    fillColor: that.getLayerColor(feature),
                                    fillOpacity: 0.7
                                };
                            }
                        }).bindTooltip(function(layer) {
                            return layer.feature.properties.NAME;
                        });

                        that._map.addLayer(that.jsonSubLayer);

                        that._map.setZoom(7);
                        that._map.fitBounds(that.jsonSubLayer.getBounds());

                        // that._map.setView([point._latlng.lng, point._latlng.lat], 8);

                        // console.log(111, point);
                        // that._map.addLayer([116.40411, 39.91511]);
                    }
                }
            });
        },
        handleMapType(it) {
            var that = this;

            if (it.type == that.mapType) {
                return;
            }
            if (that.city && it.type == "1") {
                return;
            }

            that.mapType = it.type;
            that.mapLoading = true;
            that._map.removeLayer(that.jsonLayer);
            that._map.removeLayer(that.jsonSubLayer);
            that.getMapIncome(that.indexCode);
        },
        getMapIncome(indexCode) {
            var that = this;

            $budgetAPI.getMapIncome(
                {
                    areaId: that.form.areaId,
                    indexCode: indexCode,
                    isCountry: that.mapType
                },
                res => {
                    if (res.code == 0) {
                        that.areaColor = [];
                        var limit = that.mapType == 0 ? 4 : 31;
                        var bad = res.content.length - limit;

                        res.content.map((it, i) => {
                            if (i < limit - 1) {
                                // god
                                if (that.city) {
                                    // 差 #f08181, 中 #4f99db  好 #5cccaa
                                    it.color = "#5cccaa";
                                } else {
                                    it.color = "#7ad3b8";
                                }
                            } else if (i > bad) {
                                if (that.city) {
                                    it.color = "#f08181";
                                } else {
                                    it.color = "#e6cc8e";
                                }
                            } else {
                                if (that.city) {
                                    it.color = "#4f99db";
                                } else {
                                    it.color = "#56a8dd";
                                }
                            }
                        });
                        that.areaColor = res.content;
                        that.getLayerInfo();
                    }
                },
                err => {
                    // that.getLayerInfo();
                    console.log(err);
                }
            );
        },
        handleArea(val) {
            var that = this;

            if (that.form.areaId == "1") {
                return;
            }
            if (val == 'city' && !that.street) {
                return;
            }

            that._map.removeLayer(that.jsonSubLayer);
            that._map.removeLayer(that.jsonLayer);
            that.jsonSubLayer = "";

            if (val == "pro") {
                that.form.areaId = "1";
                that.city = "";
                var obj = {
                    areaId: that.form.areaId,
                    areaName: "浙江"
                };
                that.$bus.$emit("message", obj);
                that.subLayer = false;
            } else if (val == "city") {
                that.form.areaId = that.cityId;
                that.street = "";
                var obj = {
                    areaId: that.form.areaId,
                    areaName: that.city
                };
                that.$bus.$emit("message", obj);
                that.subLayer = false;
            }
            that.mapLoading = true;
            that.getMainOperationIncomeData();
            that.getMapIncome(that.indexCode);
        }
    }
};
</script>

<style lang="scss" scoped>
.revenueTrend {
    .topArea {
        ul {
            display: flex;
            padding-left: 15px;
            padding-top: 5px;
            li {
                flex: 1;
                padding: 15px 30px 25px;
                background-color: #fff;
                border-radius: 5px;
                font-size: 14px;
                cursor: pointer;
                box-shadow: 0 10px 10px 1px rgba(0, 0, 0, 0.15);
                margin-right: 20px;
                transition: all .4s ease;
                .td-info {
                    display: flex;
                    align-items: center;
                    .td-l {
                        flex: 1;
                        .p1 {
                            font-size: 14px;
                            color: #6a7da3;
                        }
                        .p2 {
                            font-size: 16px;
                            font-weight: bold;
                        }
                    }
                    .titlebg0 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-n1.png")
                            no-repeat;
                        background-size: contain;
                    }
                    .titlebg1 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-n2.png")
                            no-repeat;
                        background-size: contain;
                    }
                    .titlebg2 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-n3.png")
                            no-repeat;
                        background-size: contain;
                    }
                    .titlebg3 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-n4.png")
                            no-repeat;
                        background-size: contain;
                    }
                }
                .bd {
                    margin-top: 25px;
                    display: flex;
                    align-items: center;
                    .bd-info {
                        flex: 1;
                        .p1 {
                            font-size: 12px;
                            color: #7183a8;
                        }
                        .p2 {
                            margin-top: 10px;
                            font-size: 14px;
                            font-weight: bold;
                            color: #292f3b;
                        }
                        .up {
                            width: 0;
                            height: 0;
                            border-width: 0 7px 7px;
                            border-style: solid;
                            border-color: transparent transparent #32c328;
                            display: inline-block;
                            vertical-align: 3px;
                            margin-left: 15px;
                        }
                        .down {
                            width: 0;
                            height: 0;
                            border-width: 7px 7px 0;
                            border-style: solid;
                            border-color: #e8404f transparent transparent;
                            display: inline-block;
                            vertical-align: 3px;
                            margin-left: 15px;
                        }
                    }
                }
                &:hover {
                     transform: translateY(5px);
                }
                &.active,  &:hover {
                    background-image: linear-gradient(
                        to bottom right,
                        #4ae3ff,
                        #42adfd
                    );
                    color: #fff;
                    // box-shadow: -3px 0px 8px rgba(66, 173, 253, 0.3),
                    //     5px 0 8px rgba(66, 173, 253, 0.3),
                    //     0px 0px 8px rgba(66, 173, 253, 0.3),
                    //     0px 5px 8px rgba(66, 173, 253, 0.3);
                    box-shadow:  0 0 15px 3px rgba(66, 173, 253, 0.3);
                    .titlebg0 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-w1.png")
                            no-repeat;
                        background-size: contain;
                    }
                    .titlebg1 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-w2.png")
                            no-repeat;
                        background-size: contain;
                    }
                    .titlebg2 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-w3.png")
                            no-repeat;
                        background-size: contain;
                    }
                    .titlebg3 {
                        width: 45px;
                        height: 40px;
                        background: url("~@/assets/images/common/type-w4.png")
                            no-repeat;
                        background-size: contain;
                    }

                    .td-l {
                        .p1 {
                            color: #fff;
                        }
                    }
                    .bd-info {
                        .p1 {
                            color: #fff;
                        }
                        .p2 {
                            color: #fff;
                        }
                        .up {
                            border-color: transparent transparent #fff;
                        }
                        .down {
                            border-color: #fff transparent transparent;
                        }
                    }
                }
            }
            // li:last-child {
            //     margin-right: 0;
            // }
        }
    }
    .bottomArea {
        display: flex;
        height: 370px;
        position: relative;
        .leftArea {
            width: 60%;
            position: relative;
            margin-right: 30px;
            &.active {
                width: 100%;
                margin-right: 0px;
                transition: 0.3s ease;
            }
            .title {
                position: relative;
                top: 20px;
                color: #000;
                font-size: 14px;
                font-weight: 700;
            }
            .income {
                padding: 5px 10px;
                background: #f2f3f7;
                border-radius: 50px;
                position: absolute;
                left: 0;
                top: 40%;
            }
            .yearOnYear {
                padding: 5px 10px;
                background: #f2f3f7;
                border-radius: 50px;
                position: absolute;
                right: 0px;
                top: 48%;
            }
        }
        // .rightArea{
        //   width: 0;
        // }
        .rightArea {
            width: 40%;
            position: relative;
            &.active {
                width: 0;
                display: none;
            }
            .title {
                position: relative;
                top: 20px;
                color: #000;
                font-size: 14px;
                font-weight: 700;
            }
        }
    }
    .g-wrapper {
        margin-top: 25px;
        display: flex;
        height: 730px;
        padding: 15px;
        .g-maps {
            flex: 1;
            // height: 730px;
            max-width: 600px;
            margin-right: 15px;
            position: relative;
            .areaTree {
                position: absolute;
                left: 15px;
                top: 5px;
                z-index: 2;
                .el-cascader {
                    width: 100px;
                }
                .tree {
                    display: flex;
                    align-items: center;
                    background: #62769f;
                    height: 35px;
                    line-height: 35px;
                    padding: 0 8px;
                    border-bottom-left-radius: 8px;
                    border-bottom-right-radius: 8px;
                    .it {
                        color: #fff;
                        font-size: 12px;
                        cursor: pointer;
                        position: relative;
                    }
                    .right {
                        color: #fff;
                        margin: 0 6px;
                    }
                    .city {
                        // &::after {
                        //     // position: absolute;
                        //     // top: 50%;
                        //     // right: 0;
                        //     display: inline-block;
                        //     content: "";
                        //     color: #fff;
                        //     width: 0;
                        //     height: 0;
                        //     border-width: 4px 4px 0;
                        //     border-style: solid;
                        //     border-color: #fff transparent transparent;
                        //     display: inline-block;
                        //     vertical-align: 3px;
                        //     margin-left: 3px;
                        // }
                    }
                    .street {
                        &::after {
                            display: inline-block;
                            content: "";
                            color: #fff;
                            width: 0;
                            height: 0;
                            border-width: 4px 4px 0;
                            border-style: solid;
                            border-color: #fff transparent transparent;
                            display: inline-block;
                            vertical-align: 3px;
                            margin-left: 3px;
                        }
                    }
                }
            }

            .lineTip {
                position: absolute;
                right: 15px;
                bottom: 65px;
                z-index: 2;
                .td {
                    display: block;
                    float: left;
                    p {
                        text-align: center;
                    }
                    .line1 {
                        width: 60px;
                        height: 8px;
                        background-color: #e6c28e;
                        border-top-left-radius: 8px;
                        border-bottom-left-radius: 8px;
                    }
                    .line2 {
                        width: 60px;
                        height: 8px;
                        background-color: #56a8dd;
                    }
                    .line3 {
                        width: 60px;
                        height: 8px;
                        background-color: #7ad3b8;
                        border-top-right-radius: 8px;
                        border-bottom-right-radius: 8px;
                    }
                }
            }

            .lineTip2 {
                position: absolute;
                right: 15px;
                bottom: 65px;
                z-index: 2;
                .td {
                    display: block;
                    float: left;
                    p {
                        text-align: center;
                    }
                    // 差 #f08181, 中 #4f99db  好 #5cccaa
                    .line1 {
                        width: 60px;
                        height: 8px;
                        background-color: #f08181;
                        border-top-left-radius: 8px;
                        border-bottom-left-radius: 8px;
                    }
                    .line2 {
                        width: 60px;
                        height: 8px;
                        background-color: #4f99db;
                    }
                    .line3 {
                        width: 60px;
                        height: 8px;
                        background-color: #5cccaa;
                        border-top-right-radius: 8px;
                        border-bottom-right-radius: 8px;
                    }
                }
            }

            .typeArea {
                position: absolute;
                right: 15px;
                top: 5px;
                display: flex;
                z-index: 2;
                border: 1px solid #62769f;
                border-radius: 4px;
                width: 120px;
                height: 30px;
                align-items: center;
                background-color: #fff;
                color: #62769f;
                span {
                    height: 28px;
                    line-height: 28px;
                    flex: 1;
                    font-size: 14px;
                    cursor: pointer;
                    text-align: center;
                }
                .act {
                    background-color: #62769f;
                    color: #fff;
                }
            }
            .mapLoading {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url("~@/assets/images/common/loading3.gif") 50%
                    no-repeat rgba(255, 255, 255, 0.5);
                z-index: 2;
                color: #333;
                text-align: center;
                padding-top: 400px;
            }
        }
        .g-charts {
            flex: 1;
            .title {
                font-size: 14px;
                font-weight: bold;
            }
        }
    }
}
</style>
